<!-- 游戏输赢 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showExport="true" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)" @download="getExport"
    @changeTh="data.dialogVisible = true">
    <template #form>
      <GameItem ref="GameItemRef" @query="queryGame" />
      <el-form-item :label="t('610')">
        <el-input-number :min="1" :max="100000" :precision="0" v-model="data.query.bonus_multiple"
          :placeholder="t('610')" clearable :controls="false" />
      </el-form-item>
      <el-form-item :label="$t('70')+':'">
        <el-date-picker v-model="data.query.date" type="date" range-separator="-" :start-placeholder="$t('26')"
          :end-placeholder="$t('27')" value-format="YYYY-MM-DD" clearable :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip :sortable="item.sortable ? true : false">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <div class="gameIcon">
              <div class="flex">
                <el-tag size="small">{{ GamePlatform(indexStore.gameArray,scope.row.game_id) }}</el-tag>
                <img class="game-icon" :src="selectToLabel(GAMEICON, scope.row.game_id)" alt="">
              </div>
              {{ GameName(indexStore.gameArray, scope.row.game_id) }}
            </div>
          </template>
          <template v-if="item.prop == 'bonus_multiple_count'" #default="scope">
            <span class="item_details" @click="checkDetails(scope.row)">
              {{ scope.row.bonus_multiple_count }}
            </span>
          </template>
          <template v-if="item.prop == 'game_income'" #default="scope">
            <span :class="colorClass(scope.row.game_income)">
              {{ BigWan(scope.row.game_income) }}</span>
          </template>
          <template v-if="item.prop == 'history_game_income'" #default="scope">
            <span :class="colorClass(scope.row.history_game_income)">
              {{ BigWan(scope.row.history_game_income) }}</span>
          </template>
          <template v-if="item.prop == 'game_bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.game_bet) }}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" :label="t('97')" width="90" align="center">
        <template #header>
          <el-tooltip effect="dark" :content="t('943')" placement="top">
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{ t('46') }}
        </template>
        <template #default="scope">
          <el-button type="primary" size="small" @click="checkGearDetails(scope.row)">
            {{ t('46') }}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 人数详情 -->
  <el-dialog v-model="data.isShowDetails" width="60%" :title="t('611')" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="10vh">
    <div class="dialogMax">
      <SearchTable :query="data.queryDetails" :list="data.listDetails" :total="data.totalDetails" :showSet="false"
        :showFromQuery="false" @changeSize="changeSizeDetails" @changePage="changePageDetails"
        @reset="onHideDetails(true)" @search="getSearchDetailsList">
        <template #form>
          <el-form-item label="">
            <p class="box-title mustPass gameIconShow">
              【{{ data.query.date }}】 <img class="game-icon" :src="selectToLabel(GAMEICON, data.checkedItem.game_id)"
                alt="">
              {{ GameName(indexStore.gameArray, data.checkedItem.game_id) }}
            </p>
            <span class="marginL20">{{ t('612') }}：<span class="mustPass">{{ data.checkedItem.bonus_multiple_count }}</span>人</span>
          </el-form-item>
        </template>
        <template #table>
          <template v-for="(item, index) in data.fieldDetails" :key="index">
            <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
              show-overflow-tooltip>
              <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
              <template v-if="item.prop == 'save_time_stamp'" #default="scope">
                {{ setTimestampTime(scope.row.save_time_stamp) }}
              </template>
              <template v-if="item.prop == 'bet'" #default="scope">
                <span :class="colorClass(scope.row.bet)">
                  {{ BigWan(scope.row.bet) }}</span>
              </template>
              <template v-if="item.prop == 'win'" #default="scope">
                <span :class="colorClass(scope.row.win)">
                  {{ BigWan(scope.row.win) }}</span>
              </template>
              <template v-if="item.prop == 'bonus_multiple_count'" #default="scope">
                <span class="colorText">
                  {{ BigInteger(BigDiv(scope.row.win,scope.row.bet)) }}</span>
              </template>
            </el-table-column>
          </template>
        </template>
      </SearchTable>
    </div>
  </el-dialog>

  <!-- 投注档位详情 -->
  <el-dialog v-model="data.isShowGear" width="60%" :title="t('937')" :close-on-click-modal="false"
    :close-on-press-escape="false" @close="onHideDetails" top="10vh">
    <div class="dialogMax">
      <SearchTable :list="data.gearDetailsList" :total="0" :isSearchShow="false" :showSet="false"  :resetShow="false">
        <template #form>
          <el-form-item label="">
            <p class="box-title mustPass gameIconShow">
              【{{ data.query.date }}】 <img class="game-icon" :src="selectToLabel(GAMEICON, data.checkedItem.game_id)"
                alt="">
              {{ selectToLabel(indexStore.gameArray, data.checkedItem.game_id) }}
            </p>
          </el-form-item>
        </template>
        <template #table>
          <template v-for="(item, index) in data.gearDetails" :key="index">
            <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
              show-overflow-tooltip>
              <template #header>
                <el-tooltip v-if="item.tips" effect="dark" placement="top">
                  <template #content>
                    {{item.tips}}
                  </template>
                  <el-icon class="ques-tips">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
                {{ item.label }}
              </template>
              <template v-if="item.prop == 'position'" #default="scope">
                {{ scope.row.position + 1 }}{{t('938')}}
              </template>
              <template v-if="item.prop == 'bet_money_rate'" #default="scope">
                {{ BigTimeHundred(scope.row.bet_money_rate) }}%
              </template>
              <template v-if="item.prop == 'bet_count_rate'" #default="scope">
                {{ BigTimeHundred(scope.row.bet_count_rate) }}%
              </template>
              <template v-if="item.prop == 'bet'" #default="scope">
                <span class="colorText"> {{ BigWan(scope.row.bet) }}</span>
              </template>
              <template v-if="item.prop == 'bet_money'" #default="scope">
                <span class="colorText"> {{ BigWan(BigTimes(scope.row.bet,scope.row.bet_count)) }}</span>
              </template>
              <template v-if="item.prop == 'game_income'" #default="scope">
                <span :class="colorClass(scope.row.game_income)"> {{ BigWan(scope.row.game_income) }}</span>
              </template>
              <template v-if="item.prop == 'rtp'" #default="scope">
                {{ RtpPercent(scope.row.sum_win, BigTimes(scope.row.bet,scope.row.bet_count)) }}
              </template>
            </el-table-column>
          </template>
        </template>
      </SearchTable>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
defineOptions({
  name: "gameWinning"
})
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { exportToExcel } from '@/utils/export'
import { GAMEICON } from '@/config/eunm'
import { selectToLabel, colorClass, GamePlatform,GameName } from '@/utils/index'
import { BigWan, RtpPercent, BigDiv, BigInteger, BigTimes ,BigTimeHundred } from '@/utils/math'
import { setTimestampTime, getDateDay, setTimeDateValue } from '@/utils/time'
import { getGameWin, getGameWinDetails, getGearDetails } from '@/api/report'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useRouter } from 'vue-router'
const router = useRouter()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    platform: -1,
    game_id: -1,
    currency_id: -1,
    bonus_multiple: 50,
    date: getDateDay(0)
  },
  list: [],
  total: 0,
  fields: [
    { label: t('41'), prop: 'game_id', width: '200', tips: t('594') },
    { label: t('73'), prop: 'game_income', width: '', sortable: true, tips: t('292') },
    { label: t('81'), prop: 'history_game_income', width: '', sortable: true, tips: t('293') },
    { label: t('602'), prop: 'valid_user', width: '150', sortable: true, tips: t('593') },
    { label: t('478'), prop: 'game_bet', width: '', sortable: true, tips: t('615') },
    { label: t('613'), prop: 'game_count', width: '150', sortable: true, tips: t('616') },
    { label: t('612'), prop: 'bonus_multiple_count', width: '180', sortable: true, tips: t('617') },
    { label: 'RTP', prop: 'rtp', width: '150', tips: t('618') },
    { label: t('614'), prop: 'history_rtp', width: '150', tips: t('619') }
  ],
  dialogVisible: false,
  exportLoading: false,
  checkedItem: {} as any,
  isShowDetails: false,
  isShowGear: false,
  queryDetails: {
    page: 1,
    size: 50,
    game_id: -1,
    currency_id: -1,
    bonus_multiple: 50,
    date: getDateDay(0)
  },
  listDetails: [],
  totalDetails: 0,
  fieldDetails: [
    { label: t('70'), prop: 'save_time_stamp', width: '180', tips: t('592') },
    { label: t('17'), prop: 'account_id', width: '150', tips: t('289') },
    { label: t('44'), prop: 'bet', width: '', tips: t('621') },
    { label: t('620'), prop: 'win', width: '', tips: t('622') },
    { label: t('66'), prop: 'bonus_multiple_count', width: '150', tips: t('308') },
  ],
  gearDetails: [
    { label: t('938'), prop: 'position', width: '' },
    { label: t('939'), prop: 'bet', width: '150', tips: t('973')},
    { label: t('478'), prop: 'bet_money', width: '', tips: t('974')},
    { label: t('940'), prop: 'bet_money_rate', width: '', tips: t('975')},
    { label: t('941'), prop: 'bet_count', width: '', tips: t('976')},
    { label: t('942'), prop: 'bet_count_rate', width: '', tips: t('977')},
    { label: t('80'), prop: 'game_income', width: '', tips: t('978')},
    { label: t('980'), prop: 'rtp', width: '', tips: t('979')},
  ],
  gearDetailsList: [],
})

// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
}

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query = setTimeDateValue(query)
  indexStore.setPageLoading(true)
  query.bonus_multiple = Number(query.bonus_multiple)
  let res = await getGameWin(query)
  indexStore.setPageLoading(false)
  res.data?.forEach((item: any) => {
    item.rtp = RtpPercent(BigWan(item.game_win), BigWan(item.game_bet))
    item.history_rtp = RtpPercent(BigWan(item.history_game_win), BigWan(item.history_game_bet))
  })
  data.list = res.data
}

// 查看高倍投奖人数
const checkDetails = async (row: any) => {
  if (!row.bonus_multiple_count) return ElMessage.error(t('339'))
  data.queryDetails.date = data.query.date
  data.queryDetails.game_id = row.game_id
  data.queryDetails.bonus_multiple = data.query.bonus_multiple
  data.isShowDetails = true
  data.checkedItem = row
  getSearchDetailsList()
}
const getSearchDetailsList = async () => {
  let query = JSON.parse(JSON.stringify(data.queryDetails))
  query = setTimeDateValue(query)
  indexStore.setPageLoading(true)
  let res = await getGameWinDetails(query)
  indexStore.setPageLoading(false)
  res.data?.list?.forEach((item: any) => {
    item.date = data.query.date
  })
  data.listDetails = res.data.list
  data.totalDetails = res.data.total
}

// 查看详情况
const checkGearDetails = async (row: any) => {
  data.checkedItem = row
  data.isShowGear = true
  getSearchGearDetailsList()
}
const getSearchGearDetailsList = async () => {
  let query = JSON.parse(JSON.stringify(data.query));
  query = setTimeDateValue(query)
  indexStore.setPageLoading(true)
  let res = await getGearDetails({
    operated_id: query.operated_id,
    agent_id: query.agent_id,
    game_id: data.checkedItem.game_id,
    start_time: query.start_time,
    end_time: query.end_time,
  })
  indexStore.setPageLoading(false)
  res.data?.forEach((item:any,index:number) => {
    item.position = index
  })
  data.gearDetailsList = res.data
}

// 跳转
const goUrl = async (row: any) => {
  router.push({ name: 'gameRecord', state: { date: data.query.date, game_id: data.checkedItem.game_id, account_id: row.account_id } });
}

// 导出
const getExport = async () => {
  let query = JSON.parse(JSON.stringify(data.query))
  query.page = 1
  query.size = 10000
  let res = await getGameWin(query)
  let dataList = res.data.list
  let header: string[] = []
  let list: never[][] = []

  data.fields?.forEach((item) => {
    header.push(item.label)
  })
  dataList?.forEach((item: { [x: string]: any }, index: any) => {
    let arr: never[] = []
    data.fields?.forEach((x) => {
      switch (x.prop) {
        case 'game_id':
          arr.push(GameName(indexStore.gameArray, item[x.prop]) as never)
          break
        case 'win_lose':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'history_game_income':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'game_bet':
          arr.push(BigWan(item[x.prop]) as never)
          break
        case 'rtp':
          arr.push(RtpPercent(BigWan(item['game_win']), BigWan(item['game_bet'])) as never)
          break
        case 'history_rtp':
          arr.push(RtpPercent(BigWan(item['history_game_win']), BigWan(item['history_game_bet'])) as never)
          break
        default:
          arr.push(item[x.prop] as never)
          break
      }
    })
    list.push(arr)
  })
  exportToExcel(list, header, '游戏输赢')
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changePageDetails = (val: number) => {
  data.queryDetails.page = val
  getSearchDetailsList()
}
const changeSizeDetails = (val: number) => {
  data.queryDetails.size = val
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.isShowDetails = false
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      platform: -1,
      game_id: -1,
      currency_id: -1,
      bonus_multiple: 50,
      date: getDateDay(0)
    }
    GameItemRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>